import { Component, Vue, Prop } from 'vue-property-decorator'
import styles from './index.less'

@Component({})
export default class HandWriteQrCode extends Vue {
  @Prop({}) private visible!: boolean
  @Prop({}) private imgUrl!: string
  @Prop({ default: false }) private qrInvalid!: boolean

  visibleChange(v: boolean) {
    this.$emit('update:visible', v)
  }
  refreshQrCode() {
    this.$emit('refreshQrCode')
  }

  render() {
    return (
      <div class={styles.handWriteQrCode}>
        <el-dialog
          title="电子名章绘制"
          custom-class="custom-dialog"
          width={'569px'}
          visible={this.visible}
          {...{
            on: {
              'update:visible': this.visibleChange,
            },
          }}
        >
          <div class={styles.qrContainer}>
            <img src={this.imgUrl} alt="二维码" />
            {this.qrInvalid && (
              <div class={styles.mask} onClick={this.refreshQrCode}>
                <i class="el-icon-refresh" />
              </div>
            )}
          </div>
          <p class={styles.noteText}>
            {this.qrInvalid
              ? '二维码已过期，点击刷新'
              : '请打开手机扫一扫（支付宝、微信等）二维码，绘制电子名章，5分钟内有效'}
          </p>
        </el-dialog>
      </div>
    )
  }
}
